<template>
  	<div class="home">
        <header class="navbar">
            <div class="sidebar-button" @click="openNav">
                <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon">
                    <path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path>
                </svg>
            </div>
            <a href="/" class="home-link router-link-active">
            <span class="site-name">网测必胜题库</span>
            </a>
            <div class="links" style="">
                <div class="search-box">
                    <input aria-label="Search" autocomplete="off" spellcheck="false" value="" class="" placeholder=""> <!---->
                </div>
                <nav class="nav-links can-hide">
                    <div class="nav-item">
                        <router-link to="/" class="nav-link">主页</router-link>
                    </div>
                    <div class="nav-item">
                        <router-link to="/description" class="nav-link router-link-exact-active router-link-active">使用必看</router-link>
                    </div>
                    <div class="nav-item">
                        <router-link to="/shop/index" rel="noopener noreferrer" class="nav-link external">商城中心
                            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
                            <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
                            <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
                            </svg>
                        </router-link>
                    </div>
                    <div class="nav-item">
                        <router-link to="/passport/login" rel="noopener noreferrer" class="nav-link external">登录
                            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
                            <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
                            <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
                            </svg>
                        </router-link>
                    </div>
                    <div class="nav-item">
                        <router-link to="/passport/register" rel="noopener noreferrer" class="nav-link external">注册
                            <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
                            <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
                            <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
                            </svg>
                        </router-link>
                    </div>
                </nav>
            </div>
        </header>
        <aside class="sidebar" :class="{nav_active:nav_show,is_show:!des}">
            <nav class="nav-links">
                <div class="nav-item">
                    <a href="/" class="nav-link">主页</a>
                </div>
                <div class="nav-item">
                    <a href="/description" class="nav-link router-link-exact-active router-link-active">使用必看</a>
                </div>
                <div class="nav-item">
                    <router-link to="/shop/index" class="nav-link external">商城中心
                        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
                            <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
                            <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
                        </svg>
                    </router-link>
                </div>
                <div class="nav-item">
                    <router-link to="/passport/login" class="nav-link external">登录
                    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
                        <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
                        <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
                    </svg>
                    </router-link>
                </div>
                <div class="nav-item">
                    <router-link to="/passport/register" class="nav-link external">注册
                        <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
                            <path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
                            <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
                        </svg>
                    </router-link>
                </div>
            </nav>
            <!-- <ul class="sidebar-links">
                <li>
                    <a href="/manual/group1.html" class="active sidebar-link">一、网测必胜网站介绍</a>
                </li>
                <li>
                    <a href="/manual/group2.html" class="sidebar-link">二、四大网测介绍</a>
                    <ul class="sidebar-sub-headers">
                        <li class="sidebar-sub-header">
                            <a href="/manual/group2.html#_1、普华永道" class="sidebar-link">1、普华永道</a>
                        </li>
                        <li class="sidebar-sub-header">
                            <a href="/manual/group2.html#_2、毕马威" class="sidebar-link">2、毕马威</a>
                        </li>
                        <li class="sidebar-sub-header">
                            <a href="/manual/group2.html#_3、德勤" class="sidebar-link">3、德勤</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="/manual/group3.html" class="sidebar-link">三、常见问题</a>
                    <ul class="sidebar-sub-headers">
                        <li class="sidebar-sub-header">
                            <a href="/manual/group3.html#_1、使用问题" class="sidebar-link">1、使用问题</a>
                            <ul class="sidebar-sub-headers">
                                <li class="sidebar-sub-header">
                                    <a href="/manual/group3.html#_1-1-如何使用？" class="sidebar-link">1.1 如何使用？</a>
                                </li>
                                <li class="sidebar-sub-header">
                                    <a href="/manual/group3.html#_1-2-使用码是什么？" class="sidebar-link">1.2 使用码是什么？</a>
                                </li>
                                <li class="sidebar-sub-header">
                                    <a href="/manual/group3.html#_1-3-注册不了？" class="sidebar-link">1.3 注册不了？</a>
                                </li>
                                <li class="sidebar-sub-header">
                                    <a href="/manual/group3.html#_1-4-绑定不了？" class="sidebar-link">1.4 绑定不了？</a>
                                </li>
                                <li class="sidebar-sub-header">
                                    <a href="/manual/group3.html#_1-5-使用时限问题？" class="sidebar-link">1.5  使用时限问题？</a>
                                </li>
                            </ul>
                        </li>
                        <li class="sidebar-sub-header">
                            <a href="/manual/group3.html#_2、购买问题" class="sidebar-link">2、购买问题</a>
                            <ul class="sidebar-sub-headers">
                                <li class="sidebar-sub-header">
                                    <a href="/manual/group3.html#_2-1-网站购买" class="sidebar-link">2.1 网站购买</a>
                                </li>
                                <li class="sidebar-sub-header">
                                    <a href="/manual/group3.html#_2-2-淘宝购买" class="sidebar-link">2.2 淘宝购买</a>
                                </li>
                            </ul>
                        </li>
                        <li class="sidebar-sub-header">
                            <a href="/manual/group3.html#_3、题库内容" class="sidebar-link">3、题库内容</a>
                            <ul class="sidebar-sub-headers">
                                <li class="sidebar-sub-header">
                                    <a href="/manual/group3.html#_3-1-是否最新？" class="sidebar-link">3.1. 是否最新？</a>
                                </li>
                                <li class="sidebar-sub-header">
                                    <a href="/manual/group3.html#_3-2-题库全不全" class="sidebar-link">3.2. 题库全不全?</a>
                                </li>
                                <li class="sidebar-sub-header">
                                    <a href="/manual/group3.html#_3-3-题库量多少" class="sidebar-link">3.3. 题库量多少?</a>
                                </li>
                                <li class="sidebar-sub-header">
                                    <a href="/manual/group3.html#_3-4-答案和解析" class="sidebar-link">3.4. 答案和解析</a>
                                </li>
                                <li class="sidebar-sub-header">
                                    <a href="/manual/group3.html#_3-5-中英文" class="sidebar-link">3.5. 中英文</a>
                                </li>
                                <li class="sidebar-sub-header">
                                    <a href="/manual/group3.html#_3-6-刷题时间" class="sidebar-link">3.6. 刷题时间</a>
                                </li>
                            </ul>
                        </li>
                        <li class="sidebar-sub-header">
                            <a href="/manual/group3.html#_4、网络问题" class="sidebar-link">4、网络问题</a>
                        </li>
                        <li class="sidebar-sub-header">
                            <a href="/manual/group3.html#_5、邀请返现问题" class="sidebar-link">5、邀请返现问题</a>
                        </li>
                        <li class="sidebar-sub-header">
                            <a href="/manual/group3.html#_6、考试问题" class="sidebar-link">6、考试问题</a>
                        </li>
                        <li class="sidebar-sub-header">
                            <a href="/manual/group3.html#_7、其他问题" class="sidebar-link">7、其他问题</a>
                            <ul class="sidebar-sub-headers">
                                <li class="sidebar-sub-header">
                                    <a href="/manual/group3.html#_7-1-手机pad是否可用？" class="sidebar-link">7.1. 手机pad是否可用？</a>
                                </li>
                                <li class="sidebar-sub-header">
                                    <a href="/manual/group3.html#_7-2-如何分屏？" class="sidebar-link">7.2. 如何分屏？</a>
                                </li>
                                <li class="sidebar-sub-header">
                                    <a href="/manual/group3.html#_7-3-不同设备登录？" class="sidebar-link">7.3. 不同设备登录？</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul> -->
        </aside>
	</div>

</template>

<script>
export default {
  	name: 'Home',
	data(){
		return{
            nav_show:false,
            des:false,
		}
    },
    created(){
        console.log(this.$route)
        this.des = this.$route.meta.des
    },
	mounted(){

	},
	methods:{
        //打开菜单
        openNav(){
            this.nav_show = !this.nav_show
        }
	}
}
</script>

<style lang="scss" scoped>
	.navbar, .sidebar-mask {
        position: fixed;
        top: 0;
        left: 0;
    }
    .navbar {
        z-index: 20;
        right: 0;
        height: 3.6rem;
        background-color: #fff;
        box-sizing: border-box;
        border-bottom: 1px solid #eaecef;
        padding: .7rem 1.5rem;
        line-height: 2.2rem;
        .site-name {
            font-size: 1.3rem;
            font-weight: 600;
            color: #2c3e50;
            position: relative;
        }
        .links {
            padding-left: 1.5rem;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            background-color: #fff;
            white-space: nowrap;
            font-size: .9rem;
            position: absolute;
            right: 1.5rem;
            top: .7rem;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;

        }
    }
    .sidebar-button {
        cursor: pointer;
        display: none;
        width: 1.25rem;
        height: 1.25rem;
        position: absolute;
        padding: .6rem;
        top: .6rem;
        left: 1rem;
        .icon {
            display: block;
            width: 1.25rem;
            height: 1.25rem;
        }
    }
    .navbar a, .navbar img, .navbar span {
        display: inline-block;
    }
    .nav-links{
        .nav-item {
            position: relative;
            display: inline-block;
            margin-left: 1.5rem;
            line-height: 2rem;
        }
        .nav-item:first-child {
            margin-left: 0;
        }
    }
    .sidebar-mask {
        z-index: 9;
        width: 100vw;
        height: 100vh;
        display: none;
    }
    .sidebar {
        font-size: 16px;
        background-color: #fff;
        width: 20rem;
        position: fixed;
        z-index: 10;
        margin: 0;
        top: 3.6rem;
        left: 0;
        bottom: 0;
        box-sizing: border-box;
        border-right: 1px solid #eaecef;
        overflow-y: auto;
        .nav-links {
            display: none;
            border-bottom: 1px solid #eaecef;
            padding: .5rem 0 .75rem;
            .nav-item,.repo-link {
                display: block;
                line-height: 1.25rem;
                font-size: 1.1em;
                padding: .5rem 0 .5rem 1.5rem;
            }
        }
        ul {
            padding: 0;
            margin: 0;
            list-style-type: none;
        }
        a.sidebar-link {
            font-size: 1em;
            font-weight: 400;
            display: inline-block;
            color: #2c3e50;
            border-left: .25rem solid transparent;
            padding: .35rem 1rem .35rem 1.25rem;
            line-height: 1.4;
            width: 100%;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        >.sidebar-links {
            padding: 1.5rem 0;
            >li>a.sidebar-link {
                font-size: 1.1em;
                line-height: 1.7;
                font-weight: 700;
            }
        }
    }
    .is_show{display: none;}
    @media (max-width: 959px){
        .sidebar {
            font-size: 15px;
            width: 16.4rem;
        }
    }
    @media (max-width: 719px){
        .navbar {
            padding-left: 4rem;
            .site-name {
                width: calc(100vw - 9.4rem);
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
            .links {
                padding-left: 1.5rem;
            }
            .can-hide {
                display: none;
            }

        }
        .nav-links .nav-item, .nav-links .repo-link {
            margin-left: 0;
        }
        .sidebar-button {
            display: block;
        }
        .sidebar {
            top: 0;
            padding-top: 3.6rem;
            transform: translateX(-100%);
            transition: transform .2s ease;
            .nav-links {
                display: block;
            }
            >.sidebar-links {
                padding: 1rem 0;
                >li>a.sidebar-link {
                    font-size: 1.1em;
                    line-height: 1.7;
                    font-weight: 700;
                }
            }
        }
        .nav_active{
            transform: translateX(0%);
        }
        .is_show{display: block;}
    }


</style>
